<!-- 报价弹窗 -->
<template>
	<u-popup v-model="show" mode="center" width="600rpx" height="80%" border-radius="5" :closeable="true">
		<view class="popup">
			<view class="popup-title">{{title}}</view>
			<view class="popup-form">
				<u-form :model="form" ref="uForm" label-width="130">
					<u-form-item label="报价:" prop="quotedPrice" v-if="workflowId === '1'">
						<u-input v-model="form.quotedPrice" type="digit" />
					</u-form-item>
					<view v-else>
						<u-form-item label="≤1吨:" prop="quotedPrice1">
							<u-input v-model="form.quotedPrice1" type="digit" />
						</u-form-item>
						<u-form-item label="≤3吨:" prop="quotedPrice2">
							<u-input v-model="form.quotedPrice2" type="digit" />
						</u-form-item>
						<u-form-item label="≤5吨:" prop="quotedPrice3">
							<u-input v-model="form.quotedPrice3" type="digit" />
						</u-form-item>
						<u-form-item label="≤10吨:" prop="quotedPrice4">
							<u-input v-model="form.quotedPrice4" type="digit" />
						</u-form-item>
						<u-form-item label="≤15吨:" prop="quotedPrice5">
							<u-input v-model="form.quotedPrice5" type="digit" />
						</u-form-item>
						<u-form-item label="≤20吨:" prop="quotedPrice6">
							<u-input v-model="form.quotedPrice6" type="digit" />
						</u-form-item>
						<u-form-item label="≤25吨:" prop="quotedPrice7">
							<u-input v-model="form.quotedPrice7" type="digit" />
						</u-form-item>
						<u-form-item label="≤30吨:" prop="quotedPrice8">
							<u-input v-model="form.quotedPrice8" type="digit" />
						</u-form-item>
					</view>
					<u-form-item label="报价说明:">
						<u-input v-model="form.quoteDescription" />
					</u-form-item>
					<u-form-item label="备注:">
						<u-input v-model="form.remark" type="textarea" />
					</u-form-item>
				</u-form>
			</view>

			<view class="u-flex popup-btns">
				<u-button type="info" size="medium" @click="show=false;">取消</u-button>
				<u-button type="primary" size="medium" @click="confirm()">保存</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</u-popup>
</template>

<script>
	export default {
		name: "offer-popup",
		data() {
			return {
				show: false, // 弹窗显示
				title: '报价',
				id: '',
				form: {
					quotedPrice: '', //报价
					quoteDescription: '', //报价说明
					remark: '', //备注
					quotedPrice1: '', //≤1吨
					quotedPrice2: '', //≤3吨
					quotedPrice3: '', //≤5吨
					quotedPrice4: '', //≤10吨
					quotedPrice5: '', //≤15吨
					quotedPrice6: '', //≤20吨
					quotedPrice7: '', //≤25吨
					quotedPrice8: '', //≤30吨
					id: ''
				},
				rules: {
					quotedPrice: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur,change'
					}],
					quotedPrice1: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur,change'
					}],
					quotedPrice2: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur,change'
					}],
					quotedPrice3: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur,change'
					}],
					quotedPrice4: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur,change'
					}],
					quotedPrice5: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur,change'
					}],
					quotedPrice6: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur,change'
					}],
					quotedPrice7: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur,change'
					}],
					quotedPrice8: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur,change'
					}],
				},
				workflowId: '1'
			}
		},
		methods: {
			// 开启弹窗
			open(id, title, workflowId, form) {
				this.show = true;
				this.title = title
				this.id = id
				this.workflowId = workflowId
				this.form = {
					...this.form,
					...form
				}
				this.$refs.uForm.setRules(this.rules);
			},
			// 确认回调
			confirm() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading({
							title: '加载中'
						})
						this.$u.api.carrier.newQuotedPrice({
							...this.form
						}, this.form.id, this.form.id).then(data => {
							uni.hideLoading()
							if (data.code === 200 && data.success) {
								this.$refs.uToast.show({
									title: data.msg,
									type: 'success',
									duration: 1000,
									callback: (() => {
										this.$emit("callback")
										this.show = false
									})
								})
							}
						}).catch(() => {
							uni.hideLoading()
						})
					}
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.popup {
		padding: 20rpx;

		.popup-title {
			font-size: 34rpx;
			text-align: center;
		}

		.popup-form {
			margin-top: 30rpx;
		}

		.popup-btns {
			margin-top: 30rpx;
			justify-content: space-between;
		}
	}
</style>
